<template>
  <div class="index-store">
    <div class="store-search">
      <cube-input
        v-model="cubeInput.value"
        :placeholder="cubeInput.placeholder"
        :type="cubeInput.type"
        :maxlength="cubeInput.maxlength"
        :readonly="cubeInput.readonly"
        :disabled="cubeInput.disabled"
        :autofocus="cubeInput.autofocus"
        :autocomplete="cubeInput.autocomplete"
        :eye="cubeInput.eye"></cube-input>
      <cube-button :inline="true" @click="storeSearch">搜 索</cube-button>
    </div>
    <div class="store-list">
      <ul>
        <li v-for="(item, index) in books">
          <div class="store-item" @click="searchCatalog(item)">
            <img :src="item.fictionCoverUrl">
            {{item.fictionName}}
          </div>
        </li>
      </ul>
    </div>
    <div class="store-catalog" :class="{ 'store-catalog-show' : catalog.showCatalog }">
      <div class="store-catalog-close" @click="closeStoreCatalog">
        <i class="cubeic-close"></i>
      </div>
      <div class="store-catalog-loading" :class="{ 'catalog-loading-hidden' : catalog.hiddenLoading }">
        <div class="loading-section">
          <cube-loading :size="28"></cube-loading>
        </div>
      </div>
      <div class="store-catalog-chapters">
        <ul>
          <li v-for="(chapter, index) in catalog.catalogs">
            <span @click="searchChapter(chapter)">{{chapter.chapterTitle}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import req from '@/fetch/api.js'
import books from '@/mock/books.json'

const mockData = books.books
// const mockData = books.empty

export default {
  name: 'IndexStore',
  data () {
    return {
      cubeInput: {
        value: '',
        placeholder: '请输入内容',
        type: 'text',
        readonly: false,
        maxlength: 100,
        disabled: false,
        autofocus: true,
        autocomplete: true,
        eye: {
          open: false,
          reverse: false
        }
      },
      books: mockData,
      catalog: {
        showCatalog: false,
        hiddenLoading: false,
        catalogs: []
      }
    }
  },
  methods: {
    storeSearch () {
      const data = {
        condition: this.cubeInput.value,
        type: 1,
        origin: 'bqb'
      }
      req.searchFiction(data).then((resp) => {
        console.log(resp.data)
        if (resp.data != null && resp.data.code === 200 && resp.data.data != null) {
          this.books = resp.data.data.fictions
        }
      })
    },
    searchCatalog (book) {
      const data = {
        anaBookCode: book.fictionId,
        origin: 'bqb'
      }

      this.catalog.showCatalog = true
      this.catalog.hiddenLoading = false

      req.searchCatalog(data).then((resp) => {
        console.log(resp.data.data)
        this.catalog.hiddenLoading = true
        this.catalog.catalogs = resp.data.data.chapters
      })
    },
    closeStoreCatalog () {
      this.catalog.showCatalog = false
      this.catalog.catalogs = []
      this.catalog.hiddenLoading = true
    },
    searchChapter (chapter) {
      console.log(chapter)
      const queryData = {
        anaBookChapterCode: chapter.chapterId,
        url: chapter.chapterUrl,
        origin: 'bqb'
      }
      this.$router.push({
        name: 'WorldRead',
        query: queryData
      })
    }
  }
}
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped>
.store-search {
  position: relative;
}
.store-search .cube-input {
  width: 80%;
}
.store-search .cube-btn {
  width: 20%;
  position: absolute;
  display: flex;
  right: 0;
  top: 0;
  height: 40px;
  font-size: 18px;
  padding: 10px 18px;
}
.store-list {
  position: relative;
}
.store-list .store-item {
  position: inherit;
  width: 100px;
  display: grid;
  float: left;
  margin: 15px 10px;
}
.store-list .store-item img {
  width: 100px;
  height: 134px;
  display: block;
}
.store-catalog {
  position: fixed;
  width: 70%;
  bottom: 50px;
  top: 50px;
  right: -70%;
  background-color: white;
  transition: all .3s;
}
.store-catalog-show {
  right: 3%;
}
.store-catalog-loading {
  position: relative;
  width: 100%;
  height: 100%;
}
.catalog-loading-hidden {
  display: none;
}
.store-catalog .store-catalog-close {
  font-size: 20px;
}
.store-catalog-loading .loading-section {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.store-catalog .store-catalog-chapters {
  overflow: auto;
  height: 95%;
}
.store-catalog .store-catalog-chapters ul {
  overflow: hidden;
  text-align: left;
  margin: 10px;
}
.store-catalog .store-catalog-chapters ul li {
  margin: 7px;
}
</style>

